<template>
  <button @click="fadeInOut">显示/隐藏</button>
  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    <div class="ball" v-show="isShow"></div>
  </transition>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      isShow: false
    })
    const fadeInOut= () => {
      state.isShow = !state.isShow
    }
    const beforeEnter = (el) => {
      el.style.transform='translate(50px,50px)'
    }
    const enter = (el,done) => {
      el.offsetWidth
      el.style.transform='translate(150px,450px)'
      el.style.transition='all 1s ease'
      done()
    }
    const afterEnter = () => state.isShow = false
    return {
      ...toRefs(state),
      fadeInOut,
      beforeEnter,
      enter,
      afterEnter
    }
  }
}
</script>

<style scoped>
.ball{
    width:20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
  }
</style>